<template>
	<view class="entirety">
		<view class="item">
			<ul>
				<li class="label">基本信息</li>
				<li class="touxiang">
					<view class="title">头像</view>
					<view class="value"><u-avatar :size="80" class="touxiangpicture"
							:src="information.touxiang"></u-avatar>
						<image class="jiantou" src="../../../static/jiantou.png"></image>
					</view>
				</li>
				<li @click="signature.show = true">
					<view class="title">签名</view>
					<view class="value">
						{{information.signature}}
						<image class="jiantou" src="../../../static/jiantou.png"></image>
					</view>
				</li>
				<li @click="name.show = true">
					<view class="title">姓名</view>
					<view class="value">
						{{information.name}}
						<image class="jiantou" src="../../../static/jiantou.png"></image>
					</view>
				</li>
				<li @click="sex.show = true">
					<view class="title">性别</view>
					<view class="value">
						{{information.sex}}
						<image class="jiantou" src="../../../static/jiantou.png"></image>
					</view>
				</li>
				<li @click="weight.show = true">
					<view class="title">体重</view>
					<view class="value">{{information.weight}}kg<image class="jiantou"
							src="../../../static/jiantou.png"></image>
					</view>
				</li>
				<li @click="age.show = true">
					<view class="title">年龄</view>
					<view class="value">{{information.age}}
						<image class="jiantou" src="../../../static/jiantou.png"></image>
					</view>
				</li>
				<li class="label">个人地址</li>
				<li @tap="open()">
					<view class="title">城市</view>
					<view class="value">{{str}}
						<image class="jiantou" src="../../../static/jiantou.png"></image>
					</view>
				</li>
				<!-- 省市县三级联动BEGIN -->
				<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble"
					@confirm="confirm" @cancel="cancel" :visible="visible" />
				<!-- 省市县三级联动END -->
				<li @click="myAddress.show = true">
					<view class="title">我的地址</view>
					<view class="value">
						{{information.myAddress}}
						<image class="jiantou" src="../../../static/jiantou.png"></image>
					</view>
				</li>
				<li class="label">账号信息</li>
				<li @click="skipPhone()">
					<view class="title">手机号</view>
					<view class="value">{{information.phone.replace(/^(.{3})(?:\d+)(.{2})$/, "$1*****$2")}}
						<image class="jiantou" src="../../../static/jiantou.png"></image>
					</view>
				</li>
<!-- 				<li>
					<view class="title">邮箱</view>
					<view class="value">未绑定<image class="jiantou" src="../../../static/jiantou.png"></image>
					</view>
				</li> -->
				<li @click="skipcertification()">
					<view class="title">实名认证</view>
					<view class="value">暂未实名<image class="jiantou" src="../../../static/jiantou.png"></image>
					</view>
				</li>
				<li @click="skipPassword()">
					<view class="title">修改登录密码</view>
					<view class="value">
						<image class="jiantou" src="../../../static/jiantou.png"></image>
					</view>
				</li>
<!-- 				<li>
					<view class="title">更改绑定手机</view>
					<view class="value">
						<image class="jiantou" src="../../../static/jiantou.png"></image>
					</view>
				</li> -->
				<li @click="writeoff()">
					<view class="title">注销账号</view>
					<view class="value">
						<image class="jiantou" src="../../../static/jiantou.png"></image>
					</view>
				</li>
			</ul>
		</view>
		<!-- 体重模态框-BEGIN -->
		<view>
			<u-modal :show="weight.show" :showCancelButton="weight.showCancelButton" :title="weight.title"
				@cancel="weightcancel" @confirm="weightcpmform">
				<u--input placeholder="请输入内容" border="bottom" v-model="weight.value" clearable></u--input>
			</u-modal>
		</view>
		<!-- 体重模态框-END -->
		<!-- 年龄模态框-BEGIN -->
		<view>
			<u-modal :show="age.show" :showCancelButton="age.showCancelButton" :title="age.title" @cancel="agecancel"
				@confirm="agecpmform">
				<u--input placeholder="请输入内容" border="bottom" v-model="age.value"></u--input>
			</u-modal>
		</view>
		<!-- 年龄模态框-END -->
		<!-- 签名模态框-BEGIN -->
		<view>
			<u-modal :show="signature.show" :showCancelButton="signature.showCancelButton" :title="signature.title"
				@cancel="signaturecancel" @confirm="signaturecpmform">
				<u--input placeholder="请输入内容" border="bottom" v-model="signature.value"></u--input>
			</u-modal>
		</view>
		<!-- 签名模态框-END -->
		<!-- 姓名模态框-BEGIN -->
		<view>
			<u-modal :show="name.show" :showCancelButton="name.showCancelButton" :title="name.title"
				@cancel="namecancel" @confirm="namecpmform">
				<u--input placeholder="请输入内容" border="bottom" v-model="name.value"></u--input>
			</u-modal>
		</view>
		<!-- 姓名模态框-END -->
		<!-- 性别模态框-BEGIN -->
		<view>
			<u-modal :show="sex.show" :showCancelButton="sex.showCancelButton" :title="sex.title" @cancel="sexcancel"
				@confirm="sexcpmform">
				<u--input placeholder="请输入内容" border="bottom" v-model="sex.value"></u--input>
			</u-modal>
		</view>
		<!-- 性别模态框-END -->
		<!-- 我的地址模态框-BEGIN -->
		<view>
			<u-modal :show="myAddress.show" :showCancelButton="myAddress.showCancelButton" :title="myAddress.title"
				@cancel="myAddresscancel" @confirm="myAddresscpmform">
				<u--input placeholder="请输入内容" border="bottom" v-model="myAddress.value"></u--input>
			</u-modal>
		</view>
		<!-- 我的地址模态框-END -->
	</view>
</template>

<script>
// import "@/uni_modules/uview-ui/index.scss";
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				visible: false,
				maskCloseAble: true,
				str: '',
				defaultValue: '',
				column: 3,
				information: {
					touxiang: '../../../static/touxiang.jpg', //头像
					signature: '喜欢打游戏', //签名
					name: '张三', //姓名
					sex: '男', //性别
					weight: '63', //体重
					age: '22', //年龄
					city: '苏州', //城市
					myAddress: '苏州街', //我的地址
					phone: '15342473251', //手机号
				},
				//体重模态框内容所需数据
				weight: {
					show: false, //体重模态框默认关闭
					showCancelButton: true, //取消按钮显示
					title: '体重', //标题
					value: '' //输入框中的值
				},
				//年龄模态框内容所需数据
				age: {
					show: false, //年龄模态框默认关闭
					showCancelButton: true, //取消按钮显示
					title: '年龄', //标题
					value: '' //输入框中的值
				},
				//签名模态框内容所需数据
				signature: {
					show: false, //签名模态框默认关闭
					showCancelButton: true, //取消按钮显示
					title: '签名', //标题
					value: '' //输入框中的值
				},
				//姓名模态框内容所需数据
				name: {
					show: false, //姓名模态框默认关闭
					showCancelButton: true, //取消按钮显示
					title: '姓名', //标题
					value: '' //输入框中的值
				},
				//性别模态框内容所需数据
				sex: {
					show: false, //姓名模态框默认关闭
					showCancelButton: true, //取消按钮显示
					title: '性别', //标题
					value: '' //输入框中的值
				},
				//我的地址模态框内容所需数据
				myAddress: {
					show: false, //姓名模态框默认关闭
					showCancelButton: true, //取消按钮显示
					title: '我的地址', //标题
					value: '' //输入框中的值
				},
			}
		},
		methods: {
			//省市县打开
			open() {
				this.visible = true;
			},
			//省市县确认按钮
			confirm(val) {
				console.log(val);
				this.str = (val.name);
				this.visible = false;
			},
			//省市县取消按钮
			cancel() {
				this.visible = false;
			},
			// 体重模态框点击取消按钮调用的函数
			weightcancel() {
				console.log("取消");
				this.weight.show = false;
			},
			// 体重模态框点击确认按钮调用的函数
			weightcpmform() {
				console.log("确认");
				this.weight.show = false;
			},
			// 年龄模态框点击取消按钮调用的函数
			agecancel() {
				console.log("取消");
				this.age.show = false;
			},
			// 年龄模态框点击确认按钮调用的函数
			agecpmform() {
				console.log("确认");
				this.age.show = false;
			},
			// 签名模态框点击取消按钮调用的函数
			signaturecancel() {
				console.log("取消");
				this.signature.show = false;
			},
			// 签名模态框点击确认按钮调用的函数
			signaturecpmform() {
				console.log("确认");
				this.signature.show = false;
			},
			// 姓名模态框点击取消按钮调用的函数
			namecancel() {
				console.log("取消");
				this.name.show = false;
			},
			// 姓名模态框点击确认按钮调用的函数
			namecpmform() {
				console.log("确认");
				this.name.show = false;
			},
			// 性别模态框点击取消按钮调用的函数
			sexcancel() {
				console.log("取消");
				this.sex.show = false;
			},
			// 性别模态框点击确认按钮调用的函数
			sexcpmform() {
				console.log("确认");
				this.sex.show = false;
			},
			// 我的地址模态框点击取消按钮调用的函数
			myAddresscancel() {
				console.log("取消");
				this.myAddress.show = false;
			},
			// 我的地址模态框点击确认按钮调用的函数
			myAddresscpmform() {
				console.log("确认");
				this.myAddress.show = false;
			},
			//点击手机号跳转到Phone_num页面
			skipPhone() {
				var that = this;
				uni.setStorage({
					key: 'PhoneNum',
					data: that.information.phone,
					success: function() {
						console.log('用户信息已传递');
						uni.navigateTo({
							url: '/pages/mine/Information/Phone_num/Phone_num',
							success: function() {

							}
						})
					}
				});
			},
			//点击实名认证跳转到certification页面
			skipcertification(item){
				var that = this;
				uni.setStorage({
					key: 'certification',
					data: item,
					success: function() {
						console.log('实名信息已传递');
						uni.navigateTo({
							url: '/pages/mine/Information/certification/Certification/Certification',
							success: function() {
								

							}
						})
					}
				});
			},

			//点击修改登录密码跳转到Password页面
			skipPassword() {
				var that = this;
				uni.setStorage({
					key: 'PhoneNum',
					data: that.information.phone,
					success: function() {
						console.log('用户信息已传递');
						uni.navigateTo({
							url: '/pages/mine/Information/password/password',
							success: function() {
			
							}
						})
					}
				});
			},
			//点击注销账号跳转到write_off页面
			writeoff() {
				var that = this;
				uni.setStorage({
					key: 'information',
					data: that.information,
					success: function() {
						console.log('用户信息已传递');
						uni.navigateTo({
							url: '/pages/mine/Information/write_off/write_off',
							success: function() {

							}
						})
					}
				});
			}
		}
	}
</script>

<style>
	* {
		padding: 0;
		margin: 0;
	}

	.entirety {
		width: 100%;
		height: 100%;
		background-color: #F5F5F5;
	}

	.item li {
		width: 100%;
		height: 45px;
		line-height: 45px;
		background-color: #FFFFFF;
		list-style: none;
		border-bottom: 2px solid #E3E3E3;
		padding-left: 2%;
		color: #7F7F7F;
	}

	.item .touxiang {
		height: 60px;
		line-height: 60px;
	}

	.touxiangpicture {

		float: right;
		padding-right: 5px;
	}

	.item .label {
		height: 40px;
		background-color: #F0EFF4;
		font-size: 20px;
		font-weight: bold;
	}

	.title {
		float: left;
		padding-left: 2%;
	}

	.value {
		padding-right: 4%;
		float: right;
		height: 100%;
		color: #000000;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.jiantou {
		width: 15px;
		height: 15px;
		float: right;
	}

	.custom-input {
		text-align: right;
	}
</style>